<template>
	<view class="container">
		<view class="homeBg">
			<view class="title">抢购中</view>
			<!-- <image src="../../static/home/search.png" mode="widthFix" class="searchIcon" @tap="isSearch = !isSearch"></image> -->
		</view>
		<view class="searchBox">
			<u-search placeholder="请输入积分名称" v-model="billName_like" @search="searchFn" @custom="searchFn"></u-search>
		</view>
		<view class="goods_list">
			<view class="list-item" v-for="(item,index) in applyList" :key="index">
				<view class="list-item-top">
					<view class="goods-name">积分代码：{{item.billCode}}</view>
					<view class="btn" @tap.stop="lookDetail(item)">抢购</view>
				</view>
				<view class="list-item-top" style="margin-top: 10upx;">
					<view class="goods-name">积分名称：{{item.billName}}</view>
				</view>
				<view class="list-item-center">
					<view class="item-center-top">
						<view class="center-top-left">
							<view class="">数量</view>
							<view class="num">{{item.planNumber}}个</view>
						</view>
						<view class="center-top-left">
							<view class="">发行价</view>
							<view class="num">{{item.issuesPrice}}元/个</view>
						</view>
					</view>
					<view class="date">
						抢购结束时间：<text>{{moment(item.endDate).format('YYYY/MM/DD HH:mm:ss')}}</text>
					</view>
				</view>
				<view class="list-item-bottom">
					<view class="left">发行方</view>
					<view class="right">{{item.enterpriseName}}</view>
				</view>
			</view>
			<view class="msg" v-if="isEnd">
				<image src="../../static/home/line.png" mode="widthFix" class="left-line"></image>
				<text class="text">没有更多内容啦</text>
				<image src="../../static/home/line.png" mode="widthFix" class="right-line"></image>
			</view>
			<view v-show="applyList.length == 0" class="noListBox">
				<view class="noData">
					<image class="noDataImg" src="../../static/home/noData.png" mode=""></image>
					<view class="text">暂无数据</view>
				</view>
			</view>
		</view>

		<view class="popupBox" v-if="!hasLogin && isPopupShow">
			<view v-if="!hasLogin">
				<text>请先前往登录吧！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去登录</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
			<view v-if="hasLogin && uerInfo.isRealName != 1">
				<text>实名认证后才可以购买哦！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去认证</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		PATH_IMG,
		BASE_API
	} from '@/common/config.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		exapplyplanList
	} from '@/api/home.js';
	import {
		throttle
	} from "@/common/util.js"
	export default {
		data() {
			return {
				isPopupShow: true,
				isEnd: false,
				applyList: [],
				page: 1,
				pageSize: 6,
				billName_like:""
			}
		},
		mounted() {
			this.getList(this.page, this.pageSize);
		},
		onShow() {
			if (!this.hasLogin) {
				uni.reLaunch({
					url: "/pages/login/login"
				});
			}
		},
		computed: {
			...mapState(["hasLogin", "uerInfo", "h5Data"])
		},
		methods: {
			lookDetail(item) {
				uni.setStorage({
					key:"applyInfo",
					data:item,
					success(){
						uni.navigateTo({
							url: '/pages/detail/index'
						})
					}
				});
			},
			searchFn(){
				this.getList(1);
				this.isEnd = false;
				this.page = 1;
			},
			getList(page, pageSize) { //新闻
				let obj = {
					page,
					pageSize:pageSize||6,
					billName_like:this.billName_like
				}
				this.$refs.min_loading.open('加载中，请稍后！');
				exapplyplanList(obj).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.rows.length > 0) {
						let newList = [...res.data.rows];
						if (page == 1) {
							this.applyList = [...newList]
						} else {
							this.applyList = [...this.applyList, ...newList]
						}
					} else {
						return;
					}
					if (this.page>=res.data.totalPage) {
						this.isEnd = true;
						console.log('11111111')
						return
					};
					console.log('000000000')
				}).finally(() => {
					uni.stopPullDownRefresh();
					this.$refs.min_loading.close();
				});
			}
		},
		onPullDownRefresh() {//下拉刷新
			this.page = 1;
			this.isEnd = false;
			this.getList(this.page);
		},
		onReachBottom: throttle(function() {
			if(!this.isEnd){
				this.page++;
				this.getList(this.page)
			}else{
				return
			}
		}, 800),
	}
</script>
<style scoped lang="less">
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		padding-top: 230upx;

		.homeBg {
			width: 100%;
			height: 120upx;
			background: url(../../static/login/bg.png) no-repeat top center;
			background-size: 100% 500%;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.searchIcon {
				width: 44upx;
				position: absolute;
				right: 42upx;
				bottom: 50upx;
			}
		}
		
		.searchBox{
			width: 100%;
			padding: 20upx 30upx;
			position: fixed;
			top: 120upx;
			left: 0;
			background-color: #F9F8F8;
		}
		
		.boxPopup{
			width: 100%;
			padding: 50upx 30upx;
		}

		.popupBox {
			width: 100%;
			height: 84upx;
			position: fixed;
			bottom: 118upx;
			left: 0;
			padding: 0 40upx;
			z-index: 99;

			>view {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FCCC35;
				border-radius: 10upx;
				font-size: 24upx;
				padding: 0 30upx;
				color: #151515;

				.btns {
					display: flex;
					align-items: center;
					font-size: 0;

					.navigator {
						width: 130upx;
						height: 55upx;
						background: #191919;
						border-radius: 28upx;
						font-size: 24upx;
						font-weight: 400;
						color: #FCCC35;
						line-height: 55upx;
						text-align: center;
						margin-right: 10upx;
					}
				}
			}
		}

		.goods_list {
			width: 100%;
			padding: 0 30upx 120upx;

			.msg {
				text-align: center;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #BCBCBC;
				margin-top: 30upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					margin: 0 20upx;
				}

				.left-line {
					width: 100upx;
				}

				.right-line {
					width: 100upx;
					transform: rotate(-180deg);
				}

				// padding-bottom: 100upx;
			}

			.list-item {
				border: 2upx solid rgba(51, 51, 51, 0.1000);
				border-radius: 10upx;
				padding: 44upx 30upx 30upx;
				margin-bottom: 20upx;

				.list-item-top {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.goods-name {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 40upx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						padding-right: 20upx;
					}

					.look-detail {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #C09B3A;
						display: flex;
						align-items: center;
					}

					.btn {
						width: 124upx;
						height: 56upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #CEA539;
						border-radius: 8upx;
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.active {
						background: #BCBCBC;
					}
				}

				.list-item-center {
					width: 100%;
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;

					.item-center-top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 30upx 0;

						.center-top-left {
							width: 45%;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.num {
								color: #333333;
							}
						}
					}

					.date {
						width: 100%;
						border-bottom: 1px solid rgba(51, 51, 51, .1);
						padding-bottom: 30upx;
					}
				}

				.list-item-bottom {
					padding-top: 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.left{
						white-space: nowrap;
						padding-right: 30upx;
					}
					
					.right{
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}

		}

		.noListBox {
			text-align: center;

			.noData {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 500upx;

				.noDataImg {
					width: 316upx;
					height: 126upx;
				}

				.text {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B0B5BC;
					line-height: 92upx;
				}
			}
		}
	}
</style>
